<div class="layuimini-container layuimini-page-anim loukou">
    <div class="layuimini-main">
        <fieldset class="layui-elem-field layui-field-title loukou-title" style="margin-top: 20px;">
            <legend>硬件测试</legend>
        </fieldset>
        <div class="layui-bg-gray" style="padding: 30px;">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">模拟量输入</div>
                        <div class="layui-card-body">
                            <div class="layui-form">
                                <table class="layui-table loukou-table">
                                    <tbody>
                                        <tr>
                                            <td>AI1</td>
                                            <td id="AI1">0</td>
                                        </tr>
                                        <tr>
                                            <td>AI2</td>
                                            <td id="AI2">0</td>
                                        </tr>
                                        <td>AI3</td>
                                        <td id="AI3">0</td>
                                        </tr>
                                        <tr>
                                            <td>AI4</td>
                                            <td id="AI4">0</td>
                                        </tr>
                                        <tr>
                                            <td>AI5</td>
                                            <td id="AI5">0</td>
                                        </tr>
                                        <tr>
                                            <td>AI6</td>
                                            <td id="AI6">0</td>
                                        </tr>
                                        <tr>
                                            <td>AI7</td>
                                            <td id="AI7">0</td>
                                        </tr>
                                        <tr>
                                            <td>AI8</td>
                                            <td id="AI8">0</td>
                                        </tr>
                                        <tr>
                                            <td>AI8</td>
                                            <td id="AI9">0</td>
                                        </tr>
                                        <tr>
                                            <td>AI8</td>
                                            <td id="AI10">0</td>
                                        </tr>
                                        <tr>
                                            <td>AO1</td>
                                            <td id="AO1">0</td>
                                        </tr>
                                        <tr>
                                            <td>AO2</td>
                                            <td id="AO2">0</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">数字量</div>
                        <div class="layui-card-body">
                            <div class="layui-form">
                                <table class="layui-table loukou-table">
                                    <tbody>
                                        <tr>
                                            <td>DI1</td>
                                            <td id="DI1">0</td>
                                        </tr>
                                        <tr>
                                            <td>DI2</td>
                                            <td id="DI2">0</td>
                                        </tr>
                                        <tr>
                                            <td>DI3</td>
                                            <td id="DI3">0</td>
                                        </tr>
                                        <tr>
                                            <td>DI4</td>
                                            <td id="DI4">0</td>
                                        </tr>
                                        <tr>
                                            <td>DI5</td>
                                            <td id="DI5">0</td>
                                        </tr>
                                        <tr>
                                            <td>DI6</td>
                                            <td id="DI6">0</td>
                                        </tr>
                                        <tr>
                                            <td>DI7</td>
                                            <td id="DI7">0</td>
                                        </tr>
                                        <tr>
                                            <td>DI8</td>
                                            <td id="DI8">0</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">继电器状态</div>
                        <div class="layui-card-body">
                            <div class="layui-form">
                                <table class="layui-table loukou-table">
                                    <tbody>
                                        <tr>
                                            <td>RELAY1</td>
                                            <td id="RELAY1">0</td>
                                        </tr>
                                        <tr>
                                            <td>RELAY2</td>
                                            <td id="RELAY2">0</td>
                                        </tr>
                                        <tr>
                                            <td>RELAY3</td>
                                            <td id="RELAY3">0</td>
                                        </tr>
                                        <div class="layui-btn-group">
                                            <button type="button" class="layui-btn" lay-active='relay_open1'>打开</button>
                                            <button type="button" class="layui-btn"
                                                lay-active='relay_close1'>关闭</button>
                                        </div>
                                        <br />
                                        <div class="layui-btn-group">
                                            <button type="button" class="layui-btn" lay-active='relay_open2'>打开</button>
                                            <button type="button" class="layui-btn"
                                                lay-active='relay_close2'>关闭</button>
                                        </div>
                                        <br />
                                        <div class="layui-btn-group">
                                            <button type="button" class="layui-btn" lay-active='relay_open3'>打开</button>
                                            <button type="button" class="layui-btn"
                                                lay-active='relay_close3'>关闭</button>
                                        </div>
                                        <br />
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--        <div class="layui-btn-container">-->
        <!--            <button type="button" class="layui-btn layui-btn-normal" id="chosefile">选择文件</button>-->
        <!--            <button type="button" class="layui-btn" id="uploadfile">开始上传</button>-->
        <!--        </div>-->


        <fieldset class="layui-elem-field layui-field-title loukou-title" style="margin-top: 20px;">
            <legend>固件升级</legend>
        </fieldset>

        <div class="layui-bg-gray" style="padding: 30px;">
            <form action="/upload" method="post" enctype="multipart/form-data">
                文件: <input type="file" name="upload_file"><br><br>
                <input type="submit" value="上传文件">
            </form>
        </div>

    </div>
</div>
<script type="text/html" id="idTpl">
  <a class="layui-table-link">{{ d.slaveaddr }}</a>
</script>
<script>



    layui.use(['util', 'upload', 'form', 'table', 'miniPage', 'element'], function () {
        var $ = layui.jquery,
            util = layui.util,
            upload = layui.upload,
            form = layui.form,
            element = layui.element
        miniPage = layui.miniPage;
        //选完文件后不自动上传
        upload.render({
            elem: '#test8'
            , url: '' //此处配置你自己的上传接口即可
            , auto: false
            //,multiple: true
            , bindAction: '#test9'
            , done: function (res) {
                layer.msg('上传成功');
                console.log(res)
            }
        });
        function loadData(datas) {
            if (datas != null) {
                var data = JSON.parse(datas)
                for (var key in data) {
                    $('#' + key).html(data[key]);
                }
            }
        }
        function openAddHeatConfigForm() {
            var content = miniPage.getHrefContent('page/loukou/heat-config.html');
            var openWH = miniPage.getOpenWidthHeight();

            var index = layer.open({
                title: '参数配置',
                type: 1,
                shade: 0.2,
                maxmin: false,
                shadeClose: true,
                area: ["850px", "570px"],
                // offset: [openWH[2] + 'px', openWH[3] + 'px'],
                content: content,
            });
        }
        function openAddComConfigForm() {
            var content = miniPage.getHrefContent('page/loukou/com-config.html');
            var openWH = miniPage.getOpenWidthHeight();

            var index = layer.open({
                title: '串口配置',
                type: 1,
                shade: 0.2,
                maxmin: false,
                shadeClose: true,
                area: ["850px", "570px"],
                // offset: [openWH[2] + 'px', openWH[3] + 'px'],
                content: content,
            });
        }
        util.event('lay-active', {
            heat_config: openAddHeatConfigForm
        });
        util.event('lay-active', {
            com_config: openAddComConfigForm
        });
        //loadData();
        // setInterval(() => {
        //     loadData()
        // }, 5000);
        // ws = new WebSocket('ws://localhost:8082/Websocket/ws');
        const hostname = window.location.hostname
        const port = window.location.port
        ws = new WebSocket('ws://' + hostname + ':' + port + '/Websocket/ws');
        ws.binaryType = 'arraybuffer'; // "blob";//
        ws.onopen = () => {
            var sdata = {};
            sdata["name"] = "test"
            sdata["type"] = "test"
            sdata["Data"] = "test"
            //ws.send(JSON.stringify(sdata));
        };

        ws.onmessage = (msg) => {
            var data = JSON.parse(msg.data).Data
            var type = JSON.parse(msg.data).Type
            if (data != null && data != undefined && type != null && type != undefined) {
                if (type == "4") {
                    loadData(JSON.stringify(data))
                }
            }
        }
    });
</script>